<template>
	<view class="good-detail-page">
		<view class="good-section">
      <!-- :indicator-dots="true" -->
      <swiper autoplay circular indicator-active-color="#319289">
          <swiper-item v-for="(item, index) in [goodDetailObj.mainPic]" :key="index">
              <image :src="item" class="good-banner" @click="clickBanner(item)" mode="aspectFit" />
          </swiper-item>
      </swiper>
    </view>
    <view class="good-price-line">
      <view>
        <text class="lixing-price-text">利行价</text>
        <text class="lixing-price">990积分</text>
      </view>
      <view class="price-tip">积分不足部分需要补足差价</view>
    </view>
    <view class="good-name-wrap">
      <view style="padding:28rpx;background: #ffffff;">
        <text class="good-name">{{goodDetailObj.name}}</text>
      </view>
    </view>
    <!-- <view class="good-service">
      <view>
        <text>已选</text>
        <text>高奢香氛;1袋装</text>
      </view>
      <uni-icons type="right" color="#666666" />
    </view> -->
    <view class="good-description">
      <view class="description-title">
        <text>商品详情</text>
      </view>
      <view class="good-section">
        <swiper autoplay circular :indicator-dots="true" indicator-active-color="#319289">
            <swiper-item v-for="(item, index) in goodDetailObj.detailsPics" :key="index">
                <image :src="item" class="good-banner" @click="clickBanner(item)" mode="aspectFit" />
            </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="good-detail-bottom">
      <view class="contact">
        <image src="/pagesThree/static/images/cs.png" class="contact-cs" @click="clickBanner(item)" mode="aspectFit" />
        <text>联系客服</text>
      </view>
      <view class="to-buy">立即购买</view>
    </view>
	</view>
</template>

<script>

import { purchaseDetails } from '@/api/goodDetail.js'
export default {
	name: 'Shop',
	components: {},
	data() {
		return {
      goodId: '',
      goodDetailObj:{}
    }
	},
	onLoad(options) {
    console.log(options.id)
    this.goodId = options.id
    console.log('积分商城页面加载完成');
    this.getpurchaseDetails()
  },
  methods:{
    getpurchaseDetails() {
      purchaseDetails({
        id: this.goodId
      }).then(res => {
        if (res.code == 0) {
          this.goodDetailObj = res.data
        }
      })
    }
  }
}
</script>

<style scoped>
view {
  box-sizing: border-box;
}
.good-detail-page {
  padding-bottom: 120rpx;
}
.good-description {
  font-weight: 600;
  font-size: 32rpx;
  color: #333333;
  padding: 20rpx;
  background: #F1F2F3;
}
.description-title {
  background: #ffffff;
  padding: 30rpx 20rpx;
}
.good-name-wrap {
  background: #F1F2F3;
  padding: 20rpx;
}
.good-detail-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* display: flex; */
  height: 120rpx;
  background: #FFFFFF;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 0 24rpx;
  padding-top: 24rpx;
  gap: 34rpx;
  display: flex;
  align-items: center;
}
.good-section {
  width: 100%;
  height: 752rpx;
}
.good-banner {
  width: 100%;
  height: 752rpx;
}
swiper {
  width: 100%;
  height: 752rpx;
  background: #ffffff;
}
.good-price-line {
  width: 750rpx;
  height: 136rpx;
  background: linear-gradient( 90deg, #FD6311 0%, #F9850D 100%);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  padding: 16rpx 28rpx;
}
.price-tip {
  font-size: 22rpx;
  color: #FFFFFF;
}
.good-name {
  font-size: 36rpx;
  color: #333333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* padding: 28rpx; */
}
.lixing-price-text {
  font-size: 22rpx;
  color: #FFFFFF;
}
.lixing-price {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 62rpx;
  color: #FFFFFF;
}
.good-detail-bottom {
  display: flex;
  gap: 44rpx;
}
.contact {
  width: 96rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-cs {
  width: 48rpx;
  height: 48rpx;
}
.contact text {
  font-size: 24rpx;
  color: #5B5B5B;
}
.to-buy {
  width: 548rpx;
  height: 100rpx;
  background: linear-gradient( 90deg, #F98B36 0%, #FB6B0F 100%);
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  font-size: 34rpx;
  color: #FFFFFF;
  line-height: 100rpx;
  text-align: center;
}
.good-service {
  font-size: 30rpx;
  color: #333333;
}
</style>
